<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Categorymanagement</title>
    <!-- 扣分管理  实现审核   数据表格信息显示  审核记录等-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
    <h2>{{ message }}</h2>
</div>

<div id="tableView">
    <!--列表顶部搜索和工具条-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="考察单位">
                <el-input v-model="searchForm.unit" placeholder="请输入单位名称查询"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="search" @click="searchClick">查询</el-button>
            </el-form-item>
        </el-form>
    </el-row>


    <!--列表-->
    <el-row>
        <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="unit" label="单位名称" width="130"></el-table-column>
            <el-table-column prop="content" label="扣分项" width="200"></el-table-column>
            <el-table-column prop="starttime" label="扣分创建时间" width="130"></el-table-column>
            <el-table-column prop="score" label="扣除分数" width="100"></el-table-column>
            <el-table-column :formatter="Tablestate" prop="state" label="审核状态"  width="100"></el-table-column>
            <el-table-column prop="endtime" label="审核完成时间" width="200"></el-table-column>
            <el-table-column prop="user" label="审核人员" width="150"></el-table-column>
            <!--<el-table-column prop="fieldid" label="" width="120"></el-table-column>-->



            <el-table-column label="操作">
                <template scope="scope">
                    <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">审核</el-button>
                    <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
        <el-col :span="6" >
            <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
        </el-col>
        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[6,12,18,24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>
</div>
</body>


<script>

        var app=new Vue({
            el:"#app",
            message:"扣分管理",

        })

    var  tableView=new Vue({
        el:"#tableView",
        data:{
            //列表数据
            tableData: [],
            //显示加载中样式
            loading:false,
            //搜索表单
            searchForm: {
                unit:"",
            },
            //多选值
            multipleSelection: [],
            //当前页
            currentPage:1,
            //分页大小
            pageSize:6,
            //总记录数
            total:"",
            //删除的弹出框
            deleteVisible:false,
            //编辑界面是否显示
            editFormVisible: false,
            editLoading: false,
            goUrl:'',
            editFormRules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            //编辑界面数据
            editForm: {
                content:"",
                unit:"",
                content:"",
                score:"",
                state:"",
                starttime:"",
                endtime:"",
                user:""
            }
        },created:function(){
                //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
                var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                axios.post('/koufen/list',{'start':start,'pageSize':this.pageSize}).then(function(response){
                    self.total=response.data.total;
                    self.tableData = response.data.data;

                })
            }
        ,methods:{
            Tablestate:function(row){
                if (row.state==1){
                    return "审核通过";
                }else if(row.state==0) {
                    return "审核未通过";
                }else{
                    return "未审核";
                }
            },loadingData:function() {
                var _self = this;
               // _self.loading = true;
                var start =(this.currentPage-1)*this.pageSize;
                var searchForm={'start':start,'pageSize':this.pageSize,'nuit':this.nuit};
                axios.post('/koufen/list',searchForm).then(function(response){
                        _self.tableData=response.data.data;
                })
                console.log(_self.currentPage);
                setTimeout(function () {
                    console.info("加载数据成功");
                    //_self.loading = false

                }, 300);
            },
            editClick:function(row) {
                var _self = this;
                if (row.state==0||row.state==""){
                    _self.$confirm('确认通过对' + row.unit +'的扣分审核通过操作吗?', '提示', {
                        type: 'warning'
                    }).then(function(){
                        axios.post('/koufen/shenhe',row).then(function(response){
                            //self.total=response.data.total;
                            //self.tableData = response.data.data;
                            _self.loadingData();
                        })
                    })
                }

                if (row.state==1){
                    const h = _self.$createElement;
                    _self.$notify({
                        title: '重复审核',
                        message: h('i', { style: 'color: teal'}, '该扣分已通过审核,请勿重复审核！')
                    });
                }

            },
            deleteClick:function(row) {
                var _self = this;
                this.$confirm('确认通过对' + row.unit +'的扣分审核删除操作吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    axios.post('/koufen/delete',row).then(function(response){
                        _self.loadingData();
                    })
                })
            },
            searchClick:function () {
                var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var searchForm={'start':start,'pageSize':this.pageSize,'id':this.id,'unit':this.searchForm.unit};
                axios.post('/koufen/list',searchForm).then(function(response){
                    self.total=response.data.total;
                    self.tableData = response.data.data;
                })
                //self.loadingData();//搜索不用重新加载数据
            },//分页大小修改事件
            pageSizeChange:function(val) {
                console.log('每页 ' + val +' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                _self.loadingData();//重新加载数据
            }
        }
    })

</script>
</html>